<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>部门管理</title>
        <% include("/common/common_css_js.html"){} %>
    </head>
    <body>
        <div id="layout1" class="mini-layout" style="width:100%;height:100%;padding: 2px">
            <div title="center" region="center" bodyStyle="overflow:hidden;" style="border:0;">
                <!--Splitter-->
                <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
                    <!-- 左边树形结构栏 -->
                    <div size="400" maxSize="500" minSize="300" showCollapseButton="false" style="border-width:1px;border-left: none;border-top: none">
                        <div style="width: 100%; padding: 2px">
                            <% if(so.hasPermission("xtDepartment:add")){%>
                                <a  class="mini-button" iconCls="icon-add" onclick="addDepartment()">添加部门</a>
                            <% } %>
                        </div>
                        <!--Tree-->
                        <ul id="leftTree" class="mini-tree" url="${base}/pages/department_manage/treeQuery" style="width:100%;height:100%;"
                            showTreeIcon="true" textField="name" idField="id" resultAsTree="false" expandOnLoad="0"
                            onnodeclick="onNodeSelect">
                        </ul>
                    </div>

                    <div showCollapseButton="false" style="border:0px;" >
                        <% if(so.hasPermission("xtDepartment:save")){%>
                            <a  class="mini-button" iconCls="icon-ok" onclick="saveDepartment()" style="margin-left: 5px;margin-top: 5px">保存</a>
                        <% } %>
                        <div style="margin-top: 5px"></div>
                        <div id="departmentForm" style="padding: 5px">
                            <input id="opType" name="opType" emptyText="操作类型值"  class="mini-hidden" required="true" enabled="true" enabled="true" requiredErrorText="操作类型不能为空" />

                            <span>父部门:</span>
                            <input id="pid" name="pid" class="mini-treeselect" style="width:200px;" textField="name" valueField="id" emptyText="请选择..."
                                   expandOnLoad="0"  required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." requiredErrorText=""/>

                            <input id="id" name="id" emptyText="部门ID"  class="mini-hidden" required="false" enabled="true" enabled="true" requiredErrorText="部门ID不能为空" />

                            <div style="margin-top: 5px"></div>
                            <span>部门名称:</span>
                            <input id="name" name="name" emptyText="部门名称"  class="mini-textbox" style="width: 300px" required="true" enabled="true" enabled="true" requiredErrorText="部门名称不能为空"/>

                            <div style="margin-top: 5px"></div>
                            <span>部门电话:</span>
                            <input id="phone" name="phone" emptyText="部门电话"  class="mini-textbox" style="width: 300px" required="true" enabled="true" enabled="true" requiredErrorText="部门电话不能为空" />

                            <div style="margin-top: 5px"></div>
                            <span>部门地址:</span>
                            <input id="address" name="address" emptyText="部门地址"  class="mini-textbox" style="width: 500px" required="true" enabled="true" enabled="true" requiredErrorText="部门地址不能为空" />

                            <div style="margin-top: 5px"></div>
                            <span>部门领导:</span>
                            <input id="leaderId" name="leaderId" class="mini-combobox" style="width:150px;" textField="name" style="width: 300px" valueField="id" emptyText="请选择..."
                                   required="true" allowInput="true" showNullItem="false" nullItemText="请选择..." requiredErrorText="没有选择部门领导"  />

                            <div style="margin-top: 5px"></div>
                            <span>归属公司:</span>
                            <input id="companyId" name="companyId" class="mini-combobox" style="width:500px;" textField="name" valueField="id" emptyText="请选择..."
                                   required="true" allowInput="false" showNullItem="false" nullItemText="请选择..." requiredErrorText="没有选择部门归属公司"  />

                            <div style="margin-top: 5px"></div>
                            <span>所在城市:</span>
                            <input id="cityId" name="cityId" class="mini-treeselect"
                                   multiSelect="false" valueField="id" textField="name" parentField="pid" allowInput="true" style="width:300px;" valueFromSelect="true"  virtualScroll="true"
                                   style="width: 220px;" expandOnLoad="2" required="true" requiredErrorText="没有选择所在城市" nullItemText="请选择..." />


                            <div style="margin-top: 5px"></div>
                            <span>部门类型:</span>
                            <input id="categoryId" name="categoryId" class="mini-combobox" style="width:300px;" textField="name" valueField="id" emptyText="请选择..."
                                   required="true" allowInput="false" showNullItem="false" nullItemText="请选择..." requiredErrorText="没有选择部门类型"  />

                            <div style="margin-top: 5px"></div>
                            <span>部门备注:</span>
                            <textarea id="comment" name="comment" class="mini-textarea" style="width: 50%;height: 100px" emptyText="请输入物品信息" selectOnFocus="true" required="false"></textarea>

                        </div>
                    </div>


                </div>
            </div>
        </div>




        <script type="text/javascript">
            mini.parse();
            // 部门展示树型控件
            let tree = mini.get("leftTree");

            // 获取菜单Form对象
            let departmentForm = new mini.Form("#departmentForm");

            let opType = mini.get("opType");
            let pid = mini.get("pid");
            let name = mini.get("name");
            let phone = mini.get("phone");
            let address = mini.get("address");
            let leaderId = mini.get("leaderId");
            let companyId = mini.get("companyId");
            let cityId = mini.get("cityId");
            let categoryId = mini.get("categoryId");
            let comment = mini.get("comment");

            $(function () {
                // 加载部门列表
                tree.load();

                // 加载父级部门列表
                let pidJsonData = commonRenderDropList("department");
                pid.loadList(pidJsonData,"id","pid");

                let leaderIdJsonData = commonRenderDropList("sysUser");
                leaderId.load(leaderIdJsonData);

                let cityIdJsonData = commonRenderDropList("city");
                cityId.loadList(cityIdJsonData,"id","pid");

                let categoryIdJsonData = commonRenderSysDicDropListByKey("sysDic","XT_DIC_DEPARTMENT_CATEGORY");
                categoryId.load(categoryIdJsonData);

                let companyIdJsonData = commonRenderDropList("sysCompany");
                companyId.load(companyIdJsonData);

            });

            /**
             * 节点被选择
             * @param e
             */
            function onNodeSelect(e){
                let nodeData = e.node;
                // 点击选择时默认都是更新
                nodeData.opType = "update";
                departmentForm.setData(nodeData);
            }

            /**
             * 点击添加节点
             */
            function addDepartment(){
                // 清空表单
                departmentForm.clear();
                // 设置添加模式
                opType.setValue("add");
            }

            /**
             * 保存部门节点
             */
            function saveDepartment(){
                departmentForm.validate();
                if (departmentForm.isValid() == false){
                    return;
                }
                // 获取表单数据
                let formData = departmentForm.getData(true);

                let treeData = tree.data;
                if(treeData.length<=0){
                    return;
                }

                if(formData.opType=="add"){
                    let nodes = tree.getList();

                    for(let node of nodes){
                        if(node.pid == formData.pid){
                            if(node.name == formData.name){
                                showAlert("部门【" + pid.getText() + "】已经存在名称为【" + name.getValue() + "】的部门，不能重复添加同名子部门!");
                                return;
                            }
                        }
                    }
                }

                let message = "确定添加部门";
                if(formData.opType=="update"){
                    message = "确定更新部门?";
                }

                mini.confirm(
                    message,
                    "部门保存",
                    function(action) {
                        if (action == "ok") {
                            let saveUrl = "${base}/pages/department_manage/insert";
                            if(formData.opType=="update"){
                                saveUrl = "${base}/pages/department_manage/update";
                            }
                            let ret = public_getServerData(saveUrl,formData);
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    if(formData.opType=="add"){
                                        // 清空一下准备重新添加
                                        addDepartment();
                                    }
                                    // 刷新一下缓存
                                    parent.window.loadCache();
                                    // 重新加载一下 pid 中的数据
                                    let pidJsonData = commonRenderDropList("department");
                                    pid.loadList(pidJsonData,"id","pid");

                                    // 重新加载一下左侧列表
                                    tree.load();
                                }
                            });
                        }
                    });
            }




        </script>
    </body>
</html>